<template>
  <div class="page-mobile-parent">
    <div class="header">
      <div class="logout" @click="handleLogout">退出</div>
      <div class="avatar">
        <img v-show="user_info && user_info.avatar" :src="user_info.avatar" alt="">
        <img v-show="user_info && !user_info.avatar" src="/img/mobile/default-avatar.png" alt="" />
      </div>
      <div class="user-name">
        <span class="name">{{ user_info.acName || $t("locale.mobile.user.unknow") }}</span><span class="parent">家长，你好</span>
      </div>
      <div class="classroom">班级：{{ getClassName(user_info.userClass) }}</div>
      <div
        class="study-info"
      >
        <div class="study-left">
          <div>{{ buy_record_list.length }}</div>
          <div>在学课程</div>
        </div>
        <div class="study-right">
          <!-- <template v-if="studyLevelConfig.isOpenStudyLevel == 1 && kl_md.KLXXDJ == 1">
            <div @click="$router.push('/m/study-level')" class="study-star">
              {{ user_info.studyStarNum | formatStudyStar(that) }}
            </div>
            <div @click="$router.push('/m/study-level')" style="width:100%;">
              我的等级
            </div>
          </template>
          <template v-else>
            <div style="margin: 0 auto;">
              {{ user_info.studyTime ? user_info.studyTime : 0 }}
            </div>
            <div style="width:100%;">学习时长</div>
          </template> -->
          <template>
            <div style="margin: 0 auto;">
              {{ user_info.studyTime ? user_info.studyTime : 0 }}
            </div>
            <div style="width:100%;">学习时长</div>
          </template>
        </div>
      </div>
    </div>
    <div class="study-content">
      <div class="title">学习情况</div>
      <div class="study-menu">
        <div class="menu-item" @click="toPath('/m/study-situation?action=notstart-course')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_class.png" alt="">
          </div>
          <div class="menu-name">尚未学习</div>
          <!-- <div class="menu-name">即将开课</div> -->
        </div>
        <div class="menu-item" @click="toPath('/m/study-situation?action=learning-course')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_study.png" alt="">
          </div>
          <div class="menu-name">正在学习</div>
        </div>
        <div class="menu-item" @click="toPath('/m/study-situation?action=complete-course')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_complete.png" alt="">
          </div>
          <div class="menu-name">完成课程</div>
        </div>
        <div class="menu-item" @click="toPath('/m/study-situation?action=notstart-test')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_unopened.png" alt="">
          </div>
          <div class="menu-name">尚未开考</div>
        </div>
        <div class="menu-item" @click="toPath('/m/study-situation?action=learning-test')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_test.png" alt="">
          </div>
          <div class="menu-name">正在考试</div>
        </div>
        <div class="menu-item" @click="toPath('/m/study-situation?action=complete-test')">
          <div class="menu-icon">
            <img src="/img/mobile/parent_record.png" alt="">
          </div>
          <div class="menu-name">考试记录</div>
        </div>
      </div>
    </div>
    <div class="study-content">
      <div class="title">学习提醒</div>
      <div class="study-remind">
        <div class="course-remind" :class="[chapter_live_course_list.length == (index+1)?'unbottomline':'']" v-for="(item,index) in chapter_live_course_list" :key="index">
          <div class="remind-left">
            <img :src="item.iconPath" alt="">
          </div>
          <div class="remind-right">
            <div class="chapter" v-if="item.videoVoList && item.videoVoList.length > 0">{{item.videoVoList[0].chapterName}}</div>
            <div class="course-name">{{item.acName}}《{{item.courseName}}》</div>
            <div class="course-status">
              
              <template v-if="isLiveStart(item.videoVoList)">
                <img style="width:.2688rem;height:.2688rem;" src="/img/mobile/show.png" alt />
                <span style="margin-left:.1rem;">即将开播</span>
              </template>
              <template v-else>
                <img src="/img/mobile/live-white2.gif" alt />
                <span style="margin-left:.1rem;">正在直播</span>
              </template>
            </div>
          </div>
        </div>
        <van-empty
            description="暂无课程"
            v-show="chapter_live_course_list.length == 0"
          />
      </div>
    </div>
    <div class="study-content">
      <div class="title">考试提醒</div>
      <div class="study-test">
        <div class="study-box">
          <div class="test-item" v-for="(item,index) in test_list" :key="index">
            <img class="logo-tips" :src="isTestStart(item.examinationStartDate)?'/img/mobile/question_analog_start.png':'/img/mobile/question_analog_notstart.png'" alt="">
            <div class="paper-name">{{item.name}}</div>
            <div class="paper-info">
              <span>题数：{{item.itemList.length}}道</span>
              <span class="line">|</span>
              <span>限时：{{item.span}}分钟</span>
              <span class="line">|</span>
              <span>满分：{{item.total}}分</span>
            </div>
            <div class="paper-time">
              <img src="/img/mobile/paper-time.png" alt="">
              <span>考试时间：{{formatTime(item.examinationStartDate)}} - {{formatTime(item.examinationDeadlineDate)}}</span>
            </div>
          </div>
          <van-empty
            description="暂无考试"
            v-show="test_list.length == 0"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { userLogout } from "~/api/account/user";
import { getLiveChapter,getLiveCourseChapter,getLiveCourseChapterList } from "~/api/course";
import { getUserTestPaper } from "~/api/test";
export default {
  components: {},
  data() {
    return {
      chapter_live_course_list: [],
      test_list:[],
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      login_type(state) {
        return state.login_type;
      },
      user_type(state) {
        return state.user_type;
      },
      theme_color(state) {
        return state.theme_color;
      },
      major_list(state) {
        return state.major_list;
      },
      class_list(state) {
        return state.class_list;
      },
      buy_record_list(state) {
        return state.buy_record_list;
      },
      is_hidden_for_ios(state) {
        return state.is_hidden_for_ios;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      }
    })
  },
  watch: {},
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
      }else{
        if (this.user_type === "student") {
          this.$router.replace("/m/user");
        }else{
          this.initUser();
          this.getLiveCourseChapterList();
          this.getTestList();
        }
      }
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    ...mapActions(["initUser"]),
    toPath(path){
      this.$router.push({
        path,
      })
    },
    isLiveStart(videoVoList){
      if(videoVoList.length>0){
        return videoVoList[0].liveStartTime > new Date().getTime();
      }else{
        return false;
      }
      
    },
    formatTime(timestamp) {
      var newTime = new Date(timestamp);
      var y = newTime.getFullYear();
      var m = newTime.getMonth() + 1;
      var d = newTime.getDate();
      var add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      return add0(y) + "年" + add0(m) + "月" + add0(d)+"日";
    },
    isTestStart(timestamp){
      return timestamp < new Date().getTime();
    },
    async getLiveCourseChapterList() {
      this.SET_IS_LOADING(true);
      let result = await getLiveCourseChapterList({userId:this.user_info.id});
      if (result && result.data && result.data.code == 200) {
        console.log("终极章节",result.data.data)
        this.chapter_live_course_list = result.data.data;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    async getTestList() {
      this.SET_IS_LOADING(true);
      let result = await getUserTestPaper({userId:this.user_info.id});
      if (result && result.data && result.data.code == 200) {
        console.log("终极试卷",result.data.data)
        this.test_list = result.data.data;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    getClassName(id) {
      let res = this.class_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.edit.t15");
      }
    },
    async handleLogout() {
      this.$dialog
        .confirm({
          title: this.$t("locale.mobile.user.t16"),
          message: this.$t("locale.mobile.user.t17")
        })
        .then(async () => {
          let params = {};
          if (this.login_type == "email") {
            params = {
              email: this.user_info.email
            };
          } else if (this.login_type == "mobile") {
            params = {
              account: this.user_info.mobile
            };
          } else {
            params = {
              account: this.user_info.account
            };
          }
          console.log(this.login_type);
          let result = await userLogout(params);
          if (result.data.code === 200) {
            this.$store.commit("SIGN_OUT");
            this.$router.replace("/m/login");
            this.$toast(this.$t("locale.mobile.user.t18"));
          } else {
            this.$store.commit("SIGN_OUT");
          }
        })
        .catch(() => {});
    }
  },
  created() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
      } else {
        if (this.user_type === "student") {
          this.$router.replace("/m/user");
        }else{
          this.initUser();
          this.getLiveCourseChapterList();
          this.getTestList();
        }
      }
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-parent {
  position: relative;
  width: 7.2rem;
  min-height: 100vh;
  .header {
    width: 7.2rem;
    height: 4.6rem;
    background: var(--theme-color);
    padding-top: .8rem;
    .logout {
      position: absolute;
      right: 0;
      top: 0;
      width: 1rem;
      text-align: center;
      height: 0.9rem;
      line-height: 0.9rem;
      color: #ffffff;
      // background: var(--theme-color);
      // border-radius: .1rem;
      font-size: 0.3rem;
    }
    .avatar{
      width: 1.5rem;
      height: 1.5rem;
      background: #ffffff;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .user-name{
      text-align: center;
      margin: .2rem 0 .1rem;
      color: #ffffff;
      .name{
        font-size: .33rem;
        font-weight: bold;
      }
      .parent{
        margin-left: .1rem;
        font-size: .26rem;
        font-weight: bold;
      }
    }
    .classroom{
      text-align: center;
      color: #ffffff;
      font-size: .26rem;
    }
    .study-info {
      margin-top: 0.3rem;
      box-sizing: border-box;
      padding: 0rem 0.4rem 0;
      display: flex;
      color: #ffffff;
      text-align: center;
      font-size: 0.3rem;
      line-height: 0.36rem;
      position: relative;
      .study-left {
        width: 50%;
      }
      .study-right {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        .study-star {
          padding: 0 0.2rem;
          margin: 0 auto;
          border-radius: 0.2rem;
          background-color: #ffffff;
          color: var(--theme-color);
        }
      }
      &::after {
        content: "";
        display: block;
        width: 0.02rem;
        height: 0.3rem;
        position: absolute;
        left: 50%;
        bottom: 0.03rem;
        transform: translateX(-50%);
        background-color: #ffffff;
      }
    }
  }
  .study-content{
    width: 7.2rem;
    .title{
      font-size: .3rem;
      font-weight: bold;
      // padding: .4rem .2rem;
      padding: .4rem .2rem 0;
    }
    .study-menu{
      width: 6.6rem;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .menu-item{
        text-align: center;
        width: 2.2rem;
        // margin-bottom: .2rem;
        // margin: .1rem 0;
        margin-top: .3rem;
        .menu-icon{
          width: .5376rem;
          height: .5376rem;
          margin: 0 auto;
          background-color: var(--theme-color);
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .menu-name{
          // font-size: .3rem;
          font-size: .26rem;
          margin: .1rem 0;
        }
      }
    }
    .study-remind{
      .course-remind{
        width: 6.8rem;
        box-sizing: content-box;
        // padding: 0 .2rem;
        margin: 0 auto;
        // height: 1.8rem;
        height: 2.3rem;
        // background-color: chartreuse;
        // margin-bottom: .2rem;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        justify-content: space-between;
        // border-radius: .1rem;
        // box-shadow:0 2px 4px rgba(0, 0, 0, .3);
        border-bottom: .02rem solid #ededf1;
        .remind-left{
          width: 2.592rem;
          height: 1.728rem;
          background: var(--theme-color);
          border-radius: .05rem;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .remind-right{
          width: 4rem;
          height: 1.728rem;
          position: relative;
          .chapter{
            font-weight: bold;
            font-size: .26rem;
            line-height: .35rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .course-name{
            margin-top: .1rem;
            line-height: .35rem;
            font-size: .24rem;
          }
          .course-status{
            // margin-top: .2rem;
            display: flex;
            align-items: center;
            // justify-content: flex-end;
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: .24rem;
            font-weight: bold;
            img{
              display: block;
              background: var(--theme-color);
              width: 0.3rem;
              height: 0.3rem;
            }
          }
        }
      }
      .course-remind.unbottomline{
        border-bottom: none;
      }
    }
    .study-test{
      .study-box{
        width: 7.2rem;
        .test-item{
          width: 6.62rem;
          height: 2.208rem;
          padding:  .3rem .192rem;
          // margin: .1rem 0;
          margin: .192rem auto;
          background-color: #ffffff;
	        border-radius: .192rem;
          // box-shadow:0 1px 2px rgba(0, 0, 0, .3);
          border: 1px solid #f2f2f2;
          position: relative;
          .logo-tips{
            display: block;
            width: .6528rem;
            height: .6528rem;
            position: absolute;
            top: .1rem;
            right: .1rem;
          }
          .paper-name{
            font-size: .288rem;
            font-weight: bold;
            color: #4a4b4d;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .paper-info{
            font-size: .2304rem;
            font-weight: bold;
            color: #abafb3;
            margin: .3rem 0;
            .line{
              margin: 0 .2rem;
            }
          }
          .paper-time{
            font-size: .2304rem;
            font-weight: bold;
            color: #abafb3;
            // margin: .2rem 0;
            display: flex;
            align-items: center;
            img{
              width: .2592rem;
              height: .2592rem;
              background: var(--theme-color);
              display: block;
              margin-right: .1rem;
            }
          }
        }
      }
    }
  }
}
</style>
